<template>
  <div class="containers">
    <div class="body">
      <div class="telNumber">
        <!-- <img src="../assets/img/mobile.png" alt=""> -->
        <input type="number" placeholder="请输入您的手机号" v-model="phone" @blur="checkphone" @input="input">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="getTel">获取手机号</button>
      </div>

      <div class="telNumber">
        <!-- <img src="../assets/img/key.png" alt="" style="width: 3.5vw;"> -->
        <input type="number" placeholder="请输入验证码" v-model="code" @input="input1">
        <div class="getcode"  v-show="show" @click="getCode">
          获取验证码
        </div>
        <div v-show="!show" class="getcode" >{{count}}s</div>
      </div>
      <p class="agree">登陆即代表同意
        <a @click="towebView('https://super.napin.com/index/goods/article?article_id=13')">
         <span>《纳品网服务条款》</span>
        </a>
      </p>
    </div>
    <div class="login" align="center" @click="getLogin">登陆</div>
  </div>
</template>
<script>
import request from '@/actions/request.js'
import localStroage from '@/actions/localStorage.js'
export default {
  data () {
    return {
      show:true,
      count:'',
      phone:'',
      code:'',
      openid:'',
      unionid:'',
    }
  },

  components: {

  },
  watch: {
  },
  methods: {
    towebView(linkUrl){
      let url='../../pages/webView/main'
      wx.setStorageSync('linkUrl',linkUrl)
      wx.navigateTo({ url })
    },
    getPhoneNumber(e) {
      console.log(wx.getStorageSync('session_key'))
      request.getTel('api/index/getTel','post',{
        iv:e.mp.detail.iv,
        encryptedData:e.mp.detail.encryptedData,
        session_key:wx.getStorageSync('session_key')
      },{},false,this)
    } ,
    checkphone(){
      const regphone = new RegExp(/^1[0123456789]\d{9}$/);
      if(!regphone.test(this.phone.trim())){
        wx.showToast({
          title:'手机号输入格式不正确',
          icon:"none",
          duration:1500
        })
      }
    },
    input(){
      if(this.phone.length>11){
        this.phone=this.phone.slice(0,11);
      }
    },
    input1(){
      if(this.code.length>6){
        this.code=this.code.slice(0,6);
      }
    },

    getCode(){
      const regphone = new RegExp(/^1[0123456789]\d{9}$/);
      if (regphone.test(this.phone.trim())){
        const TIME_COUNT = 60;
        request.getCode('api/index/sendCode','post',{type:2,phone:this.phone},false,this);
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
          var that=this;
          //接口
        }
      }else{
        wx.showToast({
          title: '手机号码格式错误',
          icon: 'none',
          duration: 1000,
          mask:true
        })
      }
    },
    getLogin(){
      const regphone = new RegExp(/^1[0123456789]\d{9}$/);
      if (regphone.test(this.phone.trim())){
        request.login('api/index/codeLogin','post',
          {phone: this.phone,code:this.code,unionid:this.unionid,openid:this.openid,},{},false,this);
      }else{
        wx.showToast({
          title: '手机号码格式错误',
          icon: 'none',
          duration: 1000,
          mask:true
        })
      }
    },
  },
  created () {

  },
  onShow(){
    this.unionid=wx.getStorageSync('unionid');
    this.openid=wx.getStorageSync('openid');

  },
  mounted () {
    this.unionid=wx.getStorageSync('unionid');
    this.openid=wx.getStorageSync('openid');
  }
}
</script>

<style scoped lang="scss">
  .containers{
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  padding-top: 3.3vw;
  .login{
    width: 72vw;
    height: 10.67vw;
    margin: 0px auto;
    margin-top: 11vw;
    text-align: center;
    background-color: #ff4c50;
    color: #fff;
    line-height: 10.67vw;
    font-size: 16px;
    border-radius: 6vw;
  }
    .body{
      width: 100vw;
      height: 26.67vw;
      background: #fff;

      .agree{
        font-size: 11px;
        text-indent: 4vw;
        a{
          display: inline-block;
        }
          span{
            color: #ff4c50;
          }
      }
        .telNumber{
          width: 100vw;
          height: 50px;
          border-bottom: 1px solid #f5f5f5;
          line-height: 50px;
          .getTel{
            width: 26.67vw;
            height: 8vw;
            background: #ff4c50;
            border-radius: 4vw;
            color: #fff;
            float: right;
            font-size: 15px;
            line-height: 8vw;
            text-align: center;
            margin-top: 2vw;
            margin-right: 5vw;
            border:none;

          }
          .getcode{
            width: 26.67vw;
            height: 8vw;
            background: #ff4c50;
            border-radius: 4vw;
            color: #fff;
            float: right;
            font-size: 15px;
            line-height: 8vw;
            text-align: center;
            margin-top: 2vw;
            margin-right: 5vw;
          }
          input{
            width:51vw;
            height: 50px;
            margin-left: 4.3vw;
            position: relative;
            top: -1.5vw;
            font-size: 14px;
            display: inline-block;
          }
          img{
            width: 5vw;
            height: 5.3vw;
            margin-top: 4vw;
            margin-left: 6vw;
          }
        }
    }
}
</style>
